<template>
  <div class="building-dashboard">
    <div class="dashboard-header">
      <h2>建筑可视化控制面板</h2>
    </div>
    
    <div class="dashboard-content">
      <div class="control-panel">
        <div class="control-group">
          <h3>场景控制</h3>
          <div class="control-item">
            <el-button type="primary" @click="changeBackgroundColor">切换背景色</el-button>
          </div>
          <div class="control-item">
            <el-button type="success" @click="addBuildingModel">添加建筑模型</el-button>
          </div>
          <div class="control-item">
            <el-button type="warning" @click="removeBuildingModel">移除建筑模型</el-button>
          </div>
        </div>
        
        <div class="control-group">
          <h3>人物控制</h3>
          <div class="control-item">
            <el-form :model="personPosition" label-width="60px">
              <el-form-item label="X坐标">
                <el-input-number 
                  v-model="personPosition.x" 
                  :step="0.1" 
                  :min="-10" 
                  :max="10" 
                  size="small"
                />
              </el-form-item>
              <el-form-item label="Z坐标">
                <el-input-number 
                  v-model="personPosition.z" 
                  :step="0.1" 
                  :min="-10" 
                  :max="10" 
                  size="small"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="movePerson">移动人物</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        
        <div class="control-group">
          <h3>相机控制</h3>
          <div class="control-item">
            <el-button @click="resetCamera">重置相机</el-button>
          </div>
          <div class="control-item">
            <el-button @click="moveCameraToFront">前视图</el-button>
          </div>
          <div class="control-item">
            <el-button @click="moveCameraToTop">顶视图</el-button>
          </div>
        </div>
      </div>
      
      <div class="info-panel">
        <div class="info-card">
          <h3>系统信息</h3>
          <p>当前场景对象数量: {{ sceneObjectsCount }}</p>
          <p>Three.js 版本: {{ threeVersion }}</p>
        </div>
        
        <div class="info-card">
          <h3>建筑信息</h3>
          <p>建筑名称: 示例建筑 A</p>
          <p>建筑面积: 5000 m²</p>
          <p>建筑高度: 120 m</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as THREE from 'three'
import { reactive, ref } from 'vue'

// 接收来自父组件的 threeJSViewer 实例
const props = defineProps({
  threeJSViewer: {
    type: Object,
    required: true
  }
})

// 响应式数据
const sceneObjectsCount = ref(0)
const threeVersion = ref(THREE.REVISION)
const personPosition = reactive({
  x: 2,
  z: 2
})

// 方法定义
function changeBackgroundColor() {
  const colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0x333333]
  const randomColor = colors[Math.floor(Math.random() * colors.length)]
  props.threeJSViewer.setBackgroundColor(randomColor)
}

function addBuildingModel() {
  // 创建一个简单的建筑模型（立方体）
  const geometry = new THREE.BoxGeometry(
    Math.random() * 2 + 1, 
    Math.random() * 3 + 2, 
    Math.random() * 2 + 1
  )
  const material = new THREE.MeshPhongMaterial({ 
    color: Math.random() * 0xffffff,
    shininess: 30 
  })
  const building = new THREE.Mesh(geometry, material)
  
  // 随机放置建筑位置
  building.position.set(
    (Math.random() - 0.5) * 10,
    building.geometry.parameters.height / 2,
    (Math.random() - 0.5) * 10
  )
  
  props.threeJSViewer.addModel(building)
  updateSceneInfo()
}

function removeBuildingModel() {
  const scene = props.threeJSViewer.getScene()
  if (scene && scene.children.length > 2) { // 保留默认立方体和光源
    const lastObject = scene.children[scene.children.length - 1]
    if (lastObject.isMesh) {
      scene.remove(lastObject)
      updateSceneInfo()
    }
  }
}

function resetCamera() {
  props.threeJSViewer.setCameraPosition({ x: 0, y: 0, z: 5 })
}

function moveCameraToFront() {
  props.threeJSViewer.setCameraPosition({ x: 0, y: 0, z: 10 })
}

function moveCameraToTop() {
  props.threeJSViewer.setCameraPosition({ x: 0, y: 10, z: 0 })
}

function movePerson() {
  props.threeJSViewer.movePersonToPosition(personPosition.x, personPosition.z)
}

function updateSceneInfo() {
  const scene = props.threeJSViewer.getScene()
  if (scene) {
    sceneObjectsCount.value = scene.children.length
  }
}

// 监听场景更新
onMounted(() => {
  // 初始化场景对象计数
  setTimeout(() => {
    updateSceneInfo()
  }, 100)
})
</script>

<style scoped>
.building-dashboard {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  margin: 0;
  backdrop-filter: blur(10px);
  height: calc(100vh - 50px);
  overflow-y: auto;
  box-sizing: border-box;
}

.dashboard-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.dashboard-header h2 {
  margin: 0;
  color: #333;
}

.dashboard-content {
  display: flex;
  gap: 20px;
  height: calc(100% - 140px);
}

.control-panel {
  flex: 1;
  background: #f5f5f5;
  padding: 15px;
  border-radius: 6px;
  height: 100%;
  box-sizing: border-box;
}

.info-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  box-sizing: border-box;
}

.control-group {
  margin-bottom: 20px;
}

.control-group h3 {
  margin-top: 0;
  color: #555;
}

.control-item {
  margin-bottom: 10px;
}

.info-card {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 6px;
  flex: 1;
  box-sizing: border-box;
}

.info-card h3 {
  margin-top: 0;
  color: #555;
}

.info-card p {
  margin: 8px 0;
  color: #666;
}
</style>